<template>
	<view>
		<view class="" style="padding: 110rpx 20rpx 20rpx 20rpx;">
			<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Black"></uni-icons>
		</view>
		<image class="image" v-show="isShowImg" :src="newbase64img " show-menu-by-longpress mode="widthFix"></image>
		
		<view class="" @click="saveImage" style="display: flex;justify-content: center;align-items: center;margin-top: 100rpx;">
			<l-painter ref="painter"  v-show="!isShowImg" isCanvasToTempFilePath @success="saveImg"
				:css="`width: 700rpx; height: 1000rpx;background-image: url(${newbase64img });`">
				<l-painter-image :src="userimg == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' : userimg"
					css="position: fixed; top: 400rpx; left: 120rpx; width: 90rpx; height: 90rpx; border-radius: 50%;" />
					<l-painter-text :text="username"
						css="position: fixed; top: 430rpx;letter-spacing: 4rpx; left: 230rpx;  color: #fff; font-size: 24rpx; fontWeight: bold" />
			<!-- 	<l-painter-image :src="userimg"
					css="position: fixed; top: 280rpx; left: 25%; width: 460rpx; height: 460rpx; " /> -->
				<l-painter-text :text="invitetext"
					css="position: fixed;top: 550rpx; left: 120rpx; color: #fff; font-size: 48rpx;font-family: PingFang SC-Bold, PingFang SC; fontWeight: bold" />
			
			
				<l-painter-text :text="inviteCode"
					css="position: fixed;z-index: 10000; bottom: 50rpx;letter-spacing: 4rpx; right:35%; color: #fff; font-size: 24rpx; fontWeight: bold" />
			</l-painter>
		</view>
		<view class="" style="text-align: center;">
			<uni-icons  class="yuan" custom-prefix="close" type="close" color="white" size="30" @click='reput'></uni-icons>
		</view>
		
	</view>
</template>

<script>
	import {
		imgBaseUrl,baseURL
	} from '../../../../utils/baseUrl.js'
	let userInfo = wx.getStorageSync('userInfo')
	export default {
		data() {
			return {
				isShowImg: false,
				avatar: "",
				invitetext: "放了一个思念灯",
				inviteCode: "同时保存思念卡至相册",
				userimg: userInfo.avatar,
				misimg: "",
				base64img: "",
				newbase64img: imgBaseUrl + '/img/missimg/beijing2.png',
				username:userInfo.realname
			};
		},
		methods: {
			saveCanvas() {
				this.$emit('savecavas')
			},
			saveImg(base64) {
				// console.log(base64, '图片地址')
				this.base64img = base64;
				this.isShowImg = false;
				// uni.hideLoading();
			},
			reput() {
				this.$emit('savecavas')
				this.$parent.isbtn = true
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			Black() {
				this.$emit('guo')
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//图片保存到相册
			saveImage(){
				console.log(11111);
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success: function () {
				           uni.showToast({
				           	title: '已保存到相册',
				           	//将值设置为 success 或者直接不用写icon这个参数
				           	icon: 'success',
				           	//显示持续时间为 2秒
				           	duration: 1000
				           })
				        }
				    });
				  },
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.yuan {
		width: 58rpx;
		height: 58rpx;
		// border: 2rpx solid #FFFFFF;
		// position: absolute;
		// top: 1400rpx;
		left: 350rpx;
		border-radius: 50%;
		text-align: center;
		z-index: 10000;

		.xs {
			color: #FFFFFF;
			font-size: 48rpx;
			
		}
	}

	.box {
		width: 90%;
		height: 200rpx;
		// margin-top: 500rpx;
		margin-left: 60rpx;

		.avatr {
			width: 60%;
			display: flex;
			justify-content: space-between;

			.rightft {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				vertical-align: middle;
			}
		}

		.titles {
			height: 80rpx;
			font-size: 52rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}

	}

	.tpimg {
		width: 400rpx;
		height: 380rpx;
		margin-left: 200rpx;
		margin-top: 260rpx;
	}

	.footer {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 100;
		color: #FFFFFF;
		line-height: 24rpx;
	}

	.image {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>